<template>
  <div id="app">
    <div class="top">
      <img :src="imgData[0]" alt="">
    </div>
    <div class="img1">
      <img :src="imgData[8]" alt="">
    </div>
    <div class="desc">
      <div class="h">เราให้สัญญาว่าเราจะดูแลลูกหลานของเราตั้งแต่วันแรกที่เราตั้งชื่อแ</div>
      <div class="word">
        <div>เราให้สัญญาว่าการตัดสินใจทุกครั้งและสินค้าทุกชิ้นของเราจะคำนึงถึงลูกถึงหลาน</div>
        <div>เรามีความเชื่อว่าการดำรงชีวิตที่ดีที่สุดคือการดูแลโลกของเราเพื่ออนาคตเพราะเราไม่สามารถอยู่ในโลกที่ป่วย</div>
      </div>
      <div class="btn-box">
        <div class="btn">เรียนรู้เพิ่มเติมเกี่ยวกับวิสัยทัศน์ของเรา</div>
      </div>
    </div>
    <div class="img1">
      <img :src="imgData[9]" alt="">
    </div>
    <div class="desc desc2">
      <p>นิยามใหม่ของการทำความสะอาด</p>
      <p>ช่วยกันดูแลสุขภาพของลูกหลานเราตั้งแต่วันนีนิยามใหม่ของการทำความสะอาด</p>
      <p>ช่วยกันดูแลสุขภาพของลูกหลานเราตั้งแต่วันนีนิยามใหม่ของการทำความสะอาด</p>
    </div>
    <div class="video">
      <video src="http://img.qdtech.ai/upload/decision/eb/e9/ebe92d6e264533069d85c97cce23dadb.mp4?update=1" controls="controls" height="214" poster="http://img.qdtech.ai/upload/decision/92/f4/92f48720bc4acd0317382b7b3424867c.png?update=1" @play="play" @pause="pauseVideo"></video>
    </div>
    <div class="product-wrap">
      <div class="product-item-con" v-for="(list, index) in productData" :key="index">
        <div class="product-item">
          <div class="img">
            <img onclick="return false" :src="list.img" alt="" />
          </div>
          <div class="name" v-html="list.name"></div>
          <div class="btn" @click="clickBuy(index)">Add to Cart</div>
        </div>
      </div>
    </div>
    <kz-modal @show-modal="onShowApi" ref="kzModal"></kz-modal>
    <!-- <div @click="onShowModal">点击展示modal</div> -->
    
  </div>
</template>

<script>
import axios from 'axios'
import KzModal from './components/kz-modal'
import slotStudy from './components/slotStudy.vue'
import {api} from './lib/api.js'
import {getUrlParam} from './lib/util'
import util from './lib/util'
import landpage from './mixins/landpage.js'
import 'swiper/dist/css/swiper.min.css'
import swiperConfig from './config/swiperConfig.js'
import Swiper from 'swiper'
import imgData from '@/assets/data.json'
import productData from '@/assets/product.json'

export default {
  mixins: [landpage],
  name: 'App',
  data () {
    return {
      hasPlay: false,
      setVideoTimeTimer: null,
      imgData,
      productData: []
    }
  },
  components: {
    KzModal,
    slotStudy
  },
  mounted () {
  },
  methods: {
    onShowModal () {
      this.$refs.kzModal.showKzModal()
    },
    onShowApi () {
      console.log('调用展示的api')
    },
    play: function (e) {
      this.setVideoTime();
      if (this.hasPlay) {
        return;
      }
      this.hasPlay = true;

      var params = {
        mod: this.mod,
        act: 'fullscreen',
        kz_user_id: this.kz_user_id
      }
      api.commonApi(params, function (response) {
      })
    },
    clickBuy () {
      this.$refs.kzModal.showKzModal()
    },
    pauseVideo: function () {
      clearInterval(this.setVideoTimeTimer)
    },
    setVideoTime: function () {
      var that = this;
      this.setVideoTimeTimer = setInterval(function() {
        that.setVideoTimeApi();
      }, 1000)
    },
    setVideoTimeApi: function () {
      console.log(this.setVideoTimeTimer)
      var params = {
        mod: this.mod,
        act: 'fullscreen',
        kz_user_id: this.kz_user_id
      }
      api.commonApi(params, function (response) {
      })
    }
  },
  created () {
    this.productData = productData.map((item, index) => {
      return {
        name: item.name,
        img: imgData.slice(1, 8)[index]
      }
    })
  }
}
</script>

<style lang="less">
@import './assets/css/common';
p {
   margin: 0;
}
.video {
  height: 214px;
  video {
    display: block;
    width: 100%;
    height: 214px;
     object-fit: fill;
  }
} 
.text-overflow() {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app {
  height: 1000px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  .top {
    height: 186px;
    img {
      margin: 0 auto;
      height: 186px;
    }
  }
  .img1 {
    height: 375px;
    img {
      height: 375px;
    }
  }
  .desc {
    padding: 0 24px;
    .h {
      margin-top: 28px;
      margin-bottom: 14px;
      font-size: 28px;
      color: #333;
    }
    .word {
      font-size: 24px;
      color: #999;
    }
    .btn-box {
      padding: 35px 10px 40px;
      .btn {
        width: 100%;
        height: 45px;
        line-height: 45px;
        color: #fff;
        background-color: #45b049;
        font-size: 17px;
        text-align: center;
      }
    }
    p {
      font-size: 28px;
      color: #333;
    }
    &.desc2 {
      padding: 26px 24px;
    }
  }
}
.product-wrap {
	display: flex;
	flex-wrap: wrap;
	padding: 24px 0px 0;
	text-align: center;
}
.product-item-con {
	width: 50%;
	padding: 12px 4px 28px;
}
.product-item-con .img {
	width: 100%;
  height: 280px;
  img {
    height: 100%;
  }
}

.product-item-con .name {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	line-height: 1.2;
	color: #333;
	font-size: 18px;
	font-family: 'Tahoma';
}
.product-item-con .btn {
	display: block;
	margin: 20px auto;
	width: 133px;
	height: 45px;
	line-height: 45px;
  background: #45b049;
  color: #fff;
}
.product-item-con .btn:hover {
	cursor: pointer;
}
</style>
